<template>
  <div class="article-detail-container">
    <h2 class="title">{{ detail.title }}</h2>
    <div class="header">
         <span class="author"
         >{{ $t('msg.article.author') }}：{{ detail.author }}</span
         >
      <span class="time"
      >{{ $t('msg.article.publicDate') }}：{{
          $filters.relativeTime(detail.createAt)
        }}</span
      >
      <el-button type="primary" class="edit" @click="onEditClick">
        <el-icon>
          <component :is="`el-icon-${toLine('Edit')}`" />
        </el-icon>
        <span>{{$t('msg.article.edit') }}</span>
      </el-button>
    </div>
    <div class="content" v-html="detail.content"></div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { articleDetail } from '../../../api/article'
import { useRoute, useRouter } from 'vue-router'
import { toLine } from '../../../utils'
// 获取数据
const route = useRoute()
const id: string = route.params.id as string
const detail = ref({})
const getArticleDetail = async () => {
  detail.value = await articleDetail(id)
}
getArticleDetail()

/**
 * 编辑按钮点击事件
 */
const router = useRouter()
const onEditClick = () => {
  router.push(`/article/editor/${id}`)
}
</script>

<style lang="scss" scoped>
.article-detail-container {
  .title {
    font-size: 22px;
    text-align: center;
    padding: 12px 0;
  }
  .header {
    padding: 26px 0;
    .author {
      font-size: 14px;
      color: #555666;
      margin-right: 20px;
    }
    .time {
      font-size: 14px;
      color: #999aaa;
      margin-right: 20px;
    }
    .edit {
      float: right;
    }
  }
  .content {
    font-size: 14px;
    padding: 20px 0;
    border-top: 1px solid #d4d4d4;
  }
}
</style>
